<div class="span9 color-screen" style="color:black" data-id="screen-noticias">
	<h1>Noticias:</h1>
	<div class="well">
		<span><strong>Leyenda: </strong></span>
		<span class="label label-info">Noticias no guardadas</span>
		<span class="label label-success">Noticias guardadas</span></br></br>
		<p>Los cambios al editar/crear una noticia no se guardar&aacute;n a menos que pulse el bot&oacute;n de guardado</p>
	</div>
	<!-- Boton -->
	<div class="row">
		<div class="span7 pull-right">
			<a href="#myModal" role="button" class="btn btn-inverse offset8" data-toggle="modal" data-toggle="modal" data-bind="click: function(){$root.seleccionarNoticia($root.lista().length)}">Nuevo mensaje &nbsp;<i class="icon-plus icon-white"></i></a>
		</div>
	</div>
	</br>
	<!-- Tabla -->
	<div class="row-fluid">
		<table class="table table-hover">
			<thead>
				<tr>
					<td><b>Id</b></td>
					<td><b>T&iacute;tulo</b></td>
					<td><b>Texto</b></td>
					<td><b>Fecha</b></td>
					<td><b>Opciones</b></td>
				</tr>
			</thead>
			<tbody data-bind="foreach: lista">
				<tr data-bind="css: {info: $root.lista()[$index()].id=='null', success: $root.lista()[$index()].id!='null'}">
					<td data-bind="text: $root.lista()[$index()].id"></td>
					<td data-bind="text: $root.lista()[$index()].titulo"></td>
					<td data-bind="text: $root.lista()[$index()].texto"></td>
					<td data-bind="text: $root.lista()[$index()].fecha"></td>
					<td>
						<div class="btn-toolbar">
							<div class="btn-group">
								<a href="#myModal" role="button" class="btn btn-inverse" data-toggle="modal" data-bind="click: function(){$root.seleccionarNoticia($index())}"><i class="icon-pencil icon-white"></i></a>
								<button class="btn btn-inverse" data-bind="click: function(){$root.eliminarNoticia($data,id)}"><i class="icon-trash icon-white"></i></button>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<button class="btn btn-primary btn-inverse" data-bind="click: $root.guardarCambios">
		Guardar Cambios
	</button>

	<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				×
			</button>
			<h3 id="myModalLabel">Modal header</h3>
		</div>
		<div class="modal-body" style="color:black">
			<p><strong>Puedes previsualizar el mensaje editado, para restaurarlo sin guardar los cambios es necesario la recarga de la pagina.</strong></p>
			<p class="well">
				Titulo: <input type="text" data-bind="value: lista()[noticiaSeleccionadaIndex()].titulo"/></br>
				Texto: <textarea data-bind="value: lista()[noticiaSeleccionadaIndex()].texto"></textarea></br>
			</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">
				Salir
			</button>
		</div>
	</div>

</div>

